// @mixin row-ctrl($num) {
//   @if ($num <= 3) {
//     width: 33.333333%;
//   }
//   @if ($num == 4) {
//     width: 25%;
//   }
//   @if ($num >= 5) {
//     width: 20%;
//   }
// }
@mixin light-grids($num) {
  .m-grids{
    position: relative;
    overflow: hidden;
    &:before{    // 定义顶部边框样式 (<1px)
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0; // left right 为0 表示 width100%
      height: 1px;
      border-top: 1px solid #D9D9D9; // 顶部边框颜色
      color: #D9D9D9;
      transform-origin: 0 0;
      transform: scaleY(0.5);  // Y轴方向 搜索0.5
    }
    &:after{   // 定义 左边的 边框
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 1px;
      border-left: 1px solid #D9D9D9;
      color: #D9D9D9;
      transform-origin: 0 0;
      transform: scaleX(0.5);
    }
    .m-grid{   // 单元格
      position: relative;
      float: left;
      padding: 4px 2px;
      @if ($num <= 3) {
        width: 33.333333%;
      }
      @if ($num == 4) {
        width: 25%;
      }
      @if ($num >= 5) {
        width: 20%;
      }
      // width: 33.3333333%;
      &:before {  // 单元格 的 右边框
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        border-right: 1px solid #D9D9D9;
        transform-origin: 100% 0;  // 以x轴的 右侧为 变形中心
        transform: scaleX(0.5);
      }
      &:after{     // 单元格 的 底边框
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        border-bottom: 1px solid #D9D9D9;
        transform-origin: 0 100%;
        transform: scaleY(0.5);
      }
      &:active {
        background-color: #ececec;
      }
    }   
  }
}      